<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Title</title>
    <link href="__PUBLIC__/weChat/css/base.css" rel="stylesheet" type="text/css">
    <style>
        .registerBox{padding:0 0.5em;height: 100vh;box-sizing: border-box;}
        .register-line{border-bottom: 1px solid #eeeeee;line-height: 42px;position: relative;height: 44px;font-size: 15px;}
        .register-line-left{width: 38%;float: left;}
        .register-line-right{overflow: hidden;}
        .register-line-right>input{border: none;outline: none;}
        .register-bottom{text-align: center;position: absolute;bottom: 10px;left:0;width: 100%;}
        .btn{border: none;background: #D02100;color:#fff;border-radius: 4px;}
        .btn1{padding: 5px 15px;position: absolute;right: 0; top:5px;height: 25px;line-height: 25px;font-size: 14px;}
        .btn2{width: 94%;display: inline-block;line-height: 45px;height: 45px;font-size: 18px;}
        .eye{position: absolute;right: 0;}
        .eye>img{width: 50%;}
    </style>
</head>
<body>
<div class="registerBox">

    <div class="register-line"><span class="register-line-left">绑定手机号</span><span class="register-line-right"><input type="tel" id="mobile" placeholder="请输入手机号" maxlength="11" onkeyup='this.value=this.value.replace(/\D/gi,"")'/></span></div>
    <div class="register-line"><span class="register-line-left">验证码</span><span class="register-line-right"><span class="btn btn1">获取验证码</span><input id="code" type="number" onkeyup='this.value=this.value.replace(/\D/gi,"")'/></span></div>
    <div class="register-line hide1"><span class="register-line-left">昵称</span><span class="register-line-right"><input id="nickname" type="text" value="<?php echo $user_info['nickname']?>"/></span></div>
    <div class="register-line hide1"><span class="register-line-left">密码</span><span class="register-line-right"><span class="eye close"><img src="__PUBLIC__/weChat/images/icon_eyes_c@2x.png" /></span><input type="password" id="password" placeholder="请输入密码" onKeyUp="value=value.replace(/[\W]/g,'')"/></span></div>

    <div class="register-bottom">
        <input type="hidden" name="status" value="<?php echo cookie('bind_status')?>">
        <button type="button" id="save-btn" class="btn btn2">保存资料</button>
    </div>
    <div class="prompt_box" id="error"  style="display: none ">
        <img src=""  class="icon_gth" alt="">
        <span class="prompt_span" id="errmsg"></span>
    </div>
    <div class="prompt_box"  id="suc" style="display: none">
        <img src=""  class="icon_gth" alt="">
        <span class="prompt_span" id="sucmsg"></span>
    </div>
</div>
<script src="__PUBLIC__/weChat/js/jquery-2.2.2.js"></script>
<script>
    $(function () {
       $("#save-btn").on("click", function () {
           var mobile = $("#mobile").val();
           var password = $("#password").val();
           var nickname = $("#nickname").val();
           var status=$("input[name=status]").val();
           if(status==1){ //新用户
               if(password.length<6||password.length>18){
                   $("#error").show();
                   $("#errmsg").html("请输入6-18位密码！");
                   errorHide();
                   return;
               }
           }
           var code = $("#code").val();
           $.ajax({
               type:'post',
               url:"<?php echo url('user/saveUserInfo')?>",
               data:{'username':mobile,'password':password,'code':code,'nickname':nickname,'status':status},
               success:function(msg){
                   if(msg.code == 0){
                       $('#sucmsg').html(msg.msg);
                       $("#suc").show();
                       location.href="<?php echo url('index/index')?>";
                   }else{
                       $("#error").show();
                       $("#errmsg").html(msg.errorMsg);
                       errorHide();
                       return;
                   }
               }
           });
       });
        $(".eye").on("click",function () {
            console.log($(this))
            if($(this).hasClass("close")){
                $(this).addClass("on").removeClass("close");
                $(this).html("<img src='../../images/icon_eyes_o@2x.png' />");
                $("#password").attr("type","text");
            } else if($(this).hasClass("on")){
                $(this).addClass("close").removeClass("on");
                $(this).html("<img src='../../images/icon_eyes_c@2x.png' />");
                $("#password").attr("type","password");
            }
        });


        //获取验证码
        var clock = '';
        var times = 60;
        var btn;
        $(".btn1").on("click", function () {

            if($(this).html()=="获取验证码"){

                sendCode(this);
            }
        });
        function sendCode(thisBtn) {
            var mobile = $("#mobile").val();
            var reg = /^1[0-9]{10}/;
            if(mobile == ''){
                $('#errmsg').html('手机号不能为空');
                $('#error').show();
                errorHide();
                return;
            }else if(!reg.test(mobile) && mobile.length!=""){
                $('#errmsg').html('手机号码格式不正确');
                $('#error').show();
                errorHide();
                return;
            }
            $.ajax({
                type:'post',
                url:"<?php echo url('user/checkUsername')?>",
                data: {"username":mobile},
                success:function(res){
                    if(res.code == 0){
                        $("input[name=status]").val(res.data.bind_status);
                        if(res.data.bind_status == 1){
                            $(".register-line").removeClass("hide1");
                            //新用户 发送短信验证码
                            $.ajax({
                                type:'post',
                                url:"http://zbstest.guochengic.com/home/code/sendCode",
                                data:{'username':mobile,'action':'chat_register'},
                                success:function(msg){
                                    if(msg.code==0){
                                        $('#sucmsg').html('发送成功');
                                        $("#suc").show();
                                        successHide();
                                        btn = thisBtn;
                                        btn.disabled = true; //将按钮置为不可点击
                                        btn.innerHTML  = times + '秒后获取';
                                        clock = setInterval(doLoop, 1000); //一秒执行一次
                                    }else{
                                        $("#error").show();
                                        $("#errmsg").html(msg.msg);
                                        errorHide();
                                        return;
                                    }
                                }
                            });
                        }
                        if(res.data.bind_status == 2){
                            //pc注册用户发送验证码
                            $.ajax({
                                type:'post',
                                url:"http://zbstest.guochengic.com/home/code/sendCode",
                                data:{'username':mobile,'action':'chat_register'},
                                success:function(msg){
                                    if(msg.code==0){
                                        $('#sucmsg').html('发送成功');
                                        $("#suc").show();
                                        successHide();
                                        btn = thisBtn;
                                        btn.disabled = true; //将按钮置为不可点击
                                        btn.innerHTML  = times + '秒后获取';
                                        clock = setInterval(doLoop, 1000); //一秒执行一次
                                    }else{
                                        $("#error").show();
                                        $("#errmsg").html(msg.msg);
                                        errorHide();
                                        return;
                                    }
                                }
                            });

                        }
                    } else{
                        //弹出错误提示
                        $('#errmsg').html(res.msg);
                        $('#error').show();
                        errorHide();
                        return;
                    }
                }
            });
        }


        function errorHide(){
            setTimeout(function () {
                $("#error").hide();
            },2000);
        };
        function successHide(){
            setTimeout(function () {
                $("#suc").hide();
            },3000);
        };
        function doLoop() {
            times--;
            if(times > 0){
                btn.innerHTML = times+'秒后获取';
            }else{
                clearInterval(clock); //清除js定时器
                btn.disabled = false;
                btn.innerHTML = '获取验证码';
                times = 60; //重置时间
            }
        };
    });

</script>
</body>
</html>